<template >
	<div style="margin-top: 5px;margin-bottom: -20px;">
		<el-form :inline="true">
			<el-form-item >
				<span slot="label">
					<span class="font1">问题信息</span>
				</span>
			</el-form-item>
			
			<el-button size="medium" type="success" class="fr" @click="addFormVisible = true" id="xinjian">新建问题</el-button>
		</el-form>		
	</div>
	<el-table :data="result.list" :cell-style="TableCellStyle" border height="90%" :header-cell-style="{color:'#000000',background:'#DCDCDC'}">
		<el-table-column prop="issue_id" label="问题序号" width="auto" align="center"></el-table-column>
		<el-table-column prop="job_id" label="提出人工号" width="auto" align="center"></el-table-column>
		<el-table-column prop="name" label="姓名" width="auto" align="center"></el-table-column>
		<el-table-column prop="detail" label="问题描述" width="auto" :formatter="stateFormat" align="center"></el-table-column>
		<el-table-column prop="state" label="问题状态" width="auto" align="center"></el-table-column>
		<el-table-column prop="date" label="提出时间" width="auto" align="center"></el-table-column>	
		<el-table-column prop="picture" label="详情" width="auto" align="center">
			<template #default="scope">
				<el-row justify="center" align="middle" type="flex">
					<el-button size="small" type="success" id="view_detail"
						@click="explanationList=scope.row.explanation,pictureList=scope.row.picture,detailform.issue_id=scope.row.issue_id,
						message0=scope.row.detail,pictureDetail()">查看
					</el-button>
				</el-row>
			</template>
		</el-table-column>
		<el-table-column label="申请理由及审批情况" width="auto" align="center">
			<template #default="scope">
				<el-row justify="center" align="middle" type="flex">
					<el-button size="small" type="success" id="view_reason"
						@click="detailform.issue_id=scope.row.issue_id,queryMessage(scope.row.detail),detailVisible = true">详情
					</el-button>
				</el-row>
			</template>
		</el-table-column>
	</el-table>
	<div class="block">
		<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange"
			:page-size="searchParam.onePageCount" :total="result.total">
		</el-pagination>
	</div>	

	<!-- 新建问题 -->
	<el-dialog v-model="addFormVisible" title="新建问题" width="65%" height="50%">
		<el-form :model="addform" class="fl">
			<el-form-item label="问题描述:">
				<el-input v-model="addform.detail" autocomplete="off" type="textarea" autosize="{ minRows: 1 maxRows: 100}" />
			</el-form-item>
		</el-form>
		
		<el-form-item>
			<el-upload
				action=""
				list-type="picture-card"
				:auto-upload="false"
				:limit="5"
				:before-upload="beforeUpload"
				:on-change="handleChange"
				:on-preview="handlePictureCardPreview"
				:on-remove="handleRemove">
				<i slot="default" class="el-icon-plus"></i>
			</el-upload>
			
			<el-input v-for="(item,index) in form.files" v-model="form.explanation[index]" autocomplete="off" 
				style="width: 150px;margin-right:6px" placeholder="图片描述" type="textarea" autosize="{ minRows: 1 maxRows: 100}">			
			</el-input>
			<el-text style="margin-left:150px"></el-text>
			<div style="font-size: 12px;color: #666;">
				只能上传jpg/png文件,且不超过 2MB,每张图片都要进行描述，最多上传 5 张图片
			</div>
			
			<el-dialog :visible.sync="dialogVisible">
				<img width="100%" :src="dialogImageUrl" alt="">
			</el-dialog>
		</el-form-item>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="addFormVisible = false" class="left-btn">取消</el-button>
				<el-button type="primary" @click="uploadImage()" id="xinjian_confirm">确定</el-button>
			</span>
		</template>
	</el-dialog>
	
	<!-- 原因 -->
	<el-dialog v-model="detailVisible" title="原因" width="65%" height="50%">		
		<el-form :model="detailform" class="fl">
			<el-form-item v-if="message1===''&&message2===''&&message3===''&&message4===''&&message5===''">
				<div id="app" style="text-align: center;font-size: 25px;">
					暂无 
				</div>
			</el-form-item>
			<el-form-item v-if="message1!==''" label="问题审核不通过原因：">
				<div id="app" style="text-align: left;">
					<p>{{message1}}</p>
				</div>
			</el-form-item>
			<el-form-item v-if="message2!==''" label="经费审核不通过原因：">
				<div id="app" style="text-align: left;">
					<p>{{message2}}</p>
				</div>
			</el-form-item>
			<el-form-item v-if="message3!==''" label="经费申请详情：">
				<div id="app" style="text-align: left;">
					<p>{{message3}}</p>
				</div>
			</el-form-item>
			<el-form-item v-if="message4!==''" label="维修不合格原因：">
				<div id="app" style="text-align: left;">
					<p>{{message4}}</p>
				</div>
			</el-form-item>
			<el-form-item v-if="message5!==''" label="无法维修原因：">
				<div id="app" style="text-align: left;">
					<p>{{message5}}</p>
				</div>
			</el-form-item>
		</el-form>

		<template #footer>
			<span class="dialog-footer">
				<el-button @click="detailVisible = false" id="reason_close" >关闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<script>
import { ElMessage } from "element-plus"
	import axios from "axios"
import { Text } from "vue";
	export default {
    data() {
        return {
            searchParam: {
                currentpage: 1,
                onePageCount: 13
            },
            result: [],
            addFormVisible: false,
            addform: {
                detail: '',
                picture: '',
                currentDate: new Date(),
            },
            detailVisible: false,
            detailform: {
                issue_id: '',
            },
            imagePreviewUrl: '',
            message0: '',
            message1: '',
            message2: '',
            message3: '',
            message4: '',
            message5: '',
            dialogImageUrl: '',
            dialogVisible: false,
            disabled: false,
            form: {
                files: [],
				explanation:[],
                title: ''
            },
            myPicture: '',
			myExplanation:'',
			pictureList:[],
			explanationList:[],
			pictureVisible: false,
        };
    },
    methods: {
		TableCellStyle({ row, column, rowIndex, columnIndex }) {
			if (row.state === '维修完成') {
				return "background-color:#7AC5CD;";
			} 
		},
		pictureDetail(){
			localStorage.setItem("pictureList",JSON.stringify(this.pictureList))
			localStorage.setItem("explanationList",JSON.stringify(this.explanationList))
			localStorage.setItem("explanation",this.message0)
			this.$router.push({
				path: '/home_employee/list_picture'
			})
		},
        // 格式化表格消息内容
        stateFormat(row, column, cellValue) {
            // console.log(row , column , cellValue)
            if (!cellValue)
                return "";
            if (cellValue.length > 8) {
                //最长固定显示4个字符
                return cellValue.slice(0, 8) + "...";
            }
            return cellValue;
        },
        beforeUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        handleRemove(file, fileList) {
            this.form.files = fileList;
            console.info(this.form);
        },
        handleChange(file, fileList) {
            this.form.files = fileList;
            console.info(this.form);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        uploadImage() {
			if(this.addform.detail==''){
				ElMessage.error({
					message: "请输入问题描述",
					type: "success",
				})
				return
			}
			let flag1 = 0
			let flag2 = 0
            let formData = new FormData();
            for (const file of this.form.files) { //多个文件全部都放到files
                if (file.raw) {
                    formData.append("files", file.raw);
                }
				flag1 = 1;
            }
			for (const explanation of this.form.explanation) { //多个文件全部都放到files
                if (explanation) {
                    formData.append("explanation", explanation);
                }
				flag2 = 1
            }
			if(flag1==0){
				ElMessage.error({
					message: "请添加图片",
					type: "success",
				})
				return
			}
			if(flag2==0){
				ElMessage.error({
					message: "请添加图片描述",
					type: "success",
				})
				return
			}
            axios.post('http://localhost:8000/mystu/api/issues_employee/upload', formData, {
                headers: {
                    'Content-Type': 'multipart/form-data',
                    'enctype': "multipart/form-data",
                    'Authorization': sessionStorage.getItem('authtoken')
                }
            }).then(res => {
				this.myPicture = res.data.path;
				this.myExplanation = res.data.explanation;
                this.addIssue();
            });
			this.addFormVisible = false
        },
        onSubmit(currentpage) {
            this.searchParam.currentpage = currentpage;
            axios.post("/api/issues_employee/getsubmitissue", {
                "username": sessionStorage.getItem('username'),
                "pageNum": this.searchParam.currentpage,
                "pageSize": this.searchParam.onePageCount
            }, {
                headers: {
                    'Authorization': sessionStorage.getItem('authtoken')
                }
            })
                .then(res => {
                this.result = res.data.result;
            })
                .catch(error => {
                console.log(error);
            });
        },
        handleCurrentChange(val) {
            this.onSubmit(val);
        },
        addIssue() {
            axios.post("/api/issues_employee/add", {
                "username": sessionStorage.getItem('username'),
                "detail": this.addform.detail,
                "picture": this.myPicture,
				"explanation":this.myExplanation,
                "date": this.addform.currentDate
            }, {
                headers: {
                    'Authorization': sessionStorage.getItem('authtoken'),
                    'Content-Type': 'application/json'
                }
            })
                .catch(error => {
                console.log(error);
            });
        },
        queryMessage(description) {
            axios.post("/api/issues_employee/querymessage", {
                "issue_id": this.detailform.issue_id,
            }, {
                headers: {
                    'Authorization': sessionStorage.getItem('authtoken')
                }
            })
                .then(res => {
                this.message0 = description;
                this.message1 = res.data.result.unapproval_reason;
                this.message2 = res.data.result.unfund_reason;
                this.message3 = res.data.result.applyfund_reason;
                this.message4 = res.data.result.maintenance_notqualified_reason;
                this.message5 = res.data.result.cannot_repair_reason;
            })
                .catch(error => {
                console.log(error);
            });
        },
    },
    mounted() {
        this.onSubmit(1);
    },
    components: { Text }
}
</script>

<style lang="scss">
	.fr {
		float: right;
	}

	.fl {
		text-align: left;
	}
	.table-wrapper{
		flex:1; // 该句看父元素情况
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.font1{
		font-size: 150%;
	}

	.uploader-item {
		margin: 60px 0 60px;
		:deep(.el-upload-list) {
		.is-success {
			overflow: hidden;
			height: auto;
			width: 192px;
			border: 0;
			border-radius: 0;
			margin-right: 10px;

			img,
			.el-upload-list__item-actions {
			height: 108px;
			}
			.el-input {
			.el-input__inner {
				height: 32px;
			}
	}
	}
	.is-ready,.is-uploading {
		display: none;
	}
	}
	:deep(.el-upload) {
	width: 192px;
	height: 108px;
	line-height: 108px;
	background: transparent;
	border: 1px solid #dcdfe6;
	border-radius: 0;
	margin-bottom: 20px;
	.el-icon-plus {
		color: #dcdfe6;
		font-size: 24px;
	}
	}
	}
</style>
